<!DOCTYPE html>
<html>
<head>
    <meta charset='utf-8' />
    <title>Mapbox GL JS Examples</title>
    <meta name='viewport' content='initial-scale=1,maximum-scale=1,user-scalable=no' />
    <script src='https://api.tiles.mapbox.com/mapbox-gl-js/v1.1.0/mapbox-gl.js'></script>
    <link href='https://api.tiles.mapbox.com/mapbox-gl-js/v1.1.0/mapbox-gl.css' rel='stylesheet' />
    <style>
        body { margin:0; padding:0; }
        #map { position:absolute; top:0; bottom:0; width:100%; }
    </style>
</head>
<body>

<div id='map'></div>
<script>

var map = new mapboxgl.Map({
    'container': 'map',
    'zoom': 12,
    'center': [-74.006, 40.71], // New York
    'style': {
        'version': 8,
        'sources': {
            'carto-dark': {
                'type': 'raster',
                'tiles': [
                    "http://a.basemaps.cartocdn.com/dark_all/{z}/{x}/{y}.png",
                    "http://b.basemaps.cartocdn.com/dark_all/{z}/{x}/{y}.png",
                    "http://c.basemaps.cartocdn.com/dark_all/{z}/{x}/{y}.png",
                    "http://d.basemaps.cartocdn.com/dark_all/{z}/{x}/{y}.png"
                ]
            },
            'postgis-tiles': {
                'type': 'vector',
                'tiles': [
                    "http://localhost:8080/{z}/{x}/{y}.mvt"
                ]
            }

        },
        'layers': [{
            'id': 'carto-dark-layer',
            'type': 'raster',
            'source': 'carto-dark',
            'minzoom': 0,
            'maxzoom': 22
        },{
            'id': 'postgis-tiles-layer',
            'type': 'line',
            'source': 'postgis-tiles',
            // ST_AsMVT() uses 'default' as layer name
            'source-layer': 'default', 
            'minzoom': 0,
            'maxzoom': 22,
            'paint': {
                'line-opacity': 0.7,
                'line-color': 'red',
                'line-width': 1
            }
        }]
    }
});


map.addControl(new mapboxgl.NavigationControl());
</script>

</body>
</html>